<template lang="pug">
  .user-wrapper
    span.user-avatar
      el-avatar(icon="el-icon-user-solid" :src="userInfo.photo")
      | {{userInfo.name ? userInfo.name : '用户'}}, 您好！
    a(href="javascript:" @click="editPass" class="logout" v-action:10801040000)
      i(class="el-icon-lock")
      | 修改密码
    a(href="javascript:" @click="handleLogout" class="logout")
      i(class="el-icon-switch-button")
      | 注销登录
    //- .content-box
      //- el-dropdown
        //- el-dropdown-menu(slot="dropdown")
        //-   el-dropdown-item
        //-     a(href="javascript:" @click="handleLogout")
        //-       i(class="el-icon-switch-button")
        //-       | 注销登录
</template>
<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'UserMenu',
  computed: {
    ...mapGetters(['userInfo'])

  },
  methods: {
    ...mapActions(['Logout', 'editPassToggleHandle']),
    handleLogout () {
      this.$confirm('真的要注销登录吗 ?','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        return this.Logout()
      }).catch(() => {})
    },
    editPass () {
      this.editPassToggleHandle(true)
    }
  }
}
</script>
<style lang="scss" scoped>

.user-wrapper{
  text-align: right;

  .user-avatar {
    display: inline-block;

    span {
      border: 1px solid #fff;
      margin-right: 5px;
      vertical-align: middle
    }
  }
}

.logout {
  margin-left: 20px;
  padding-left: 20px;
  position: relative;
  color: #cae3ff;

  &:hover{color: #fff}

  i {
    margin-right: 5px
  }

  &::before{
    content:'';
    display: block;
    position: absolute;
    width: 1px;
    left: 0;
    top: 0;
    bottom: 0;
    background: #094f9f
  }
}
</style>

